<template>
	<!-- 引用 MkBillList 组件，并使用 ref 引用该组件实例 -->
	<MkBillList ref="drawerRef" defaultFullScreen>
		<!-- 定义一个查询容器组件 -->
		<MkQueryContainer>
			<!-- 定义查询容器的头部模板 -->
			<template #header>
				<!-- 定义一个表单组件，用于输入查询条件，采用内联布局 -->
				<MkForm ref="queryForm" :model="searchParam" :inline="true">
					<el-row>
						<!-- 定义一个输入框，用于输入关键字，按下回车键触发搜索 -->
						<MkInput label="关键字" @keyup.enter.native="search" v-model="searchParam.keyword" clearable="" />
						<!-- 定义一个表单项，包含一个查询按钮 -->
						<el-form-item>
							<!-- 定义一个查询按钮，点击触发搜索 -->
							<MkButtonQuery @click="search" />
						</el-form-item>
					</el-row>
				</MkForm>
			</template>
			<!-- 定义一个表格组件，用于展示查询结果，加载时显示加载状态，双击行触发编辑事件 -->
			<MkTable :data="tableData" v-loading="loading" @row-dblclick="edit">
				<MkColumnIndex />
				<MkColumn prop="id" label="单据号" />
				<MkColumn prop="danJuLeiXing" label="单据类型" />
				<MkColumn prop="traShenQingId" label="申请单号" />
				<MkColumn prop="danJuZhuangTai" label="单据状态" />
				<MkColumn prop="peiXueCiShu" label="配血次数（第几次配血）" />
				<MkColumn prop="biaoBenHao" label="标本号" />
				<MkColumn prop="peiXingLeiXing" label="配型类型" />
				<MkColumn prop="remark" label="备注" />
				<MkColumnOption @show="edit" :isMore="false" />
			</MkTable>
			<!-- 定义一个分页组件，用于分页查询结果，页码和每页数量变化时触发搜索 -->
			<MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
				@query="search" />
		</MkQueryContainer>
	</MkBillList>
</template>

<script lang="ts" setup>
import { TraPeiXueApi, TraPeiXueInput, TraPeiXueOutput, TraPeiXueMingXiInput, TraPeiXueMingXiOutput } from '/@/api/tra/TraPeiXue';

// 导入分页查询的自定义钩子
import { usePageQuery } from '/@/hooks/usePageQuery';
// 导入自定义工具函数
import { clog, showSuccess } from '/@/utils';

// 定义一个引用，用于操作 MkBillList 组件实例
const drawerRef = ref();
// 定义组件的自定义事件，用于向外发送数据
const emits = defineEmits(['load']);
// 使用分页查询钩子获取搜索参数、总数、表格数据、加载状态和搜索方法
const { searchParam, total, tableData, loading, search } = usePageQuery<TraPeiXueOutput>(TraPeiXueApi.page);

// 组件挂载后触发搜索操作
onMounted(() => {
	search();
});

// 定义表格行双击或操作列点击时的编辑函数
const edit = (row: any) => {
	// 关闭 MkBillList 组件
	drawerRef.value?.close();
	// 触发自定义事件，传递当前行数据
	emits('load', row);
};

// 定义打开 MkBillList 组件的方法
const open = async () => {
	// 显示 MkBillList 组件
	drawerRef.value.show();
};

// 暴露 open 方法，供父组件调用
defineExpose({ open });
</script>

<style lang="scss" scoped></style>
